<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CDM Image Zoomer v1, by Brian Egan</title>
<script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="scripts/ui.js"></script>
<script src="scripts/jquery.dimensions.js"></script>

<script type="text/javascript">

$(document).ready(function() {

	var defaultZoom = 60;
	var bigWidth = 730;
	var bigHeight = 500;
	var sliderVal;

	function updateVal(valSlider) {
		$('.zoomin span').remove();		
		var sliderHTML = "<span>&nbsp;" + valSlider + "</span>";
		$(sliderHTML).appendTo('.zoomin');
	}

	function zoomImage(valSlider) {
	// http://cdmtest.library.unlv.edu/cgi-bin/getimage.exe?CISOROOT=%2FLV_Maps&CISOPTR=426&DMSCALE=1.1583011583011582&DMWIDTH=120&DMHEIGHT=111.08108108108108&DMROTATE=0
		$('#zoomimages').css('background-image', 'url(images/spinner.gif)');

		 var outputImage = "http://cdmtest.library.unlv.edu/cgi-bin/getimage.exe?CISOROOT=%2FLV_Maps&CISOPTR=426&DMSCALE=" + valSlider + "&DMWIDTH=20000&DMHEIGHT=20000&DMX=0&DMY=0";
		 
		 alert(outputImage);
	
        	$('#mainimage')
			.hide()
			.load(function () {
				$(this).fadeIn('fast');
				$('#zoomimages').css('background-image', 'none');
				nav();
        		})
			
			.attr('class', 'coverimage')
			.attr('src', outputImage); 

	}


	function nav(xPos, yPos) {

		$('div.navigator').remove();

		$('<div class="navigator"></div>').appendTo('#thumbnail');
		
		var navigatorWidth = ($('#thumbnail img').width() / $('#mainimage').width()) * bigWidth;
		var navigatorHeight = ($('#thumbnail img').height() / $('#mainimage').height()) * bigHeight;
		var navTop = (yPos - $('#thumbnail').offset().top) - (navigatorHeight / 2);
		var navLeft = (xPos - $('#thumbnail').offset().left) - (navigatorWidth / 2);
		
		if ((navTop + navigatorHeight) > $('#thumbnail img').height()) {
			navTop = $('#thumbnail img').height() - navigatorHeight;
		}
		else if (navTop < 0) {
			navTop = 0;
		}
		if ((navLeft + navigatorWidth) > $('#thumbnail img').width()) {
			navLeft = $('#thumbnail img').width() - navigatorWidth;
		}
		else if (navLeft < 0) {
			navLeft = 0;
		}

		if (navigatorWidth > 160) {
			navigatorWidth = $('#thumbnail img').width();
		}
		if (navigatorHeight > 160) {
			navigatorHeight = $('#thumbnail img').height();
		}

		if (!yPos) { navTop = 0 };
		if (!xPos) { navLeft = 0 };
		
		$('div.navigator').width(navigatorWidth).height(navigatorHeight).css('top', navTop + 'px').css('left', navLeft + 'px');


		// Converts the Navigation values into Main Image values and moves the Image
		
		var mainTop = "-" + ($('#mainimage').height() / $('#thumbnail img').height()) * navTop + "px";
		var mainLeft = "-" + ($('#mainimage').width() / $('#thumbnail img').width()) * navLeft + "px";		

		$('#mainimage').css('margin-top', mainTop).css('margin-left', mainLeft);
		
		 //$('div#feedback').html(navTop +', '+ navLeft);
		
	}
	
	$('#zoomcontrols').slider({
		stepping: 10,
		min: 10, 
		max: 100,
		range: true,
		change: function() {
			sliderVal = $(this).slider('value');
			updateVal(sliderVal);
			zoomImage(sliderVal);
		},
		handles: [
			{start: defaultZoom, min: 10, max: 100},
		]
	});

	$("#thumbnail").click(function(e){
		var posX = e.pageX;
		var posY = e.pageY;
		nav(posX, posY);
	});
	
	sliderVal = $('#zoomcontrols').slider('value');
	updateVal(sliderVal);
	zoomImage(sliderVal);
	

});



</script>

<link rel="stylesheet" href="jquery-ui-themeroller.css" type="text/css" media="screen">

<style type="text/css">
<!--

body,html {
	margin: 0;
	padding: 10px 0 0 0;	
}
#viewer {
	width: 760px;
	margin: 0 auto;	
}
.zoomout {
	float: left;
	display: block;
	width: 300px;
}
.zoomin {
	float: right;
}
#zoomcontrols {
	margin: 0 60px 0 20px;
}
#zoomimages {
	width: 730px;
	height: 500px;
	background-color: #EEE;
	background-repeat:no-repeat;
	background-position:center center;
	margin-top: 20px;
	position:relative;
	overflow:hidden;
}
#thumbnail {
	position:absolute;
	top:0%;
	left:0%;
	border-right: 5px solid #FFF;
	border-bottom: 5px solid #FFF;
	z-index: 5;
}
#mainimage {	
	z-index: 1;
}

.navigator {	
	background-color: #EEE;
	border: 1px solid #FFF;
	position: absolute;
	z-index: 10px;
	opacity: .5;
	top: 0;
	left: 0;
	}
#feedback {
	position:absolute;
	left: 5px;
	top: 0;	
}
-->
</style>

</head>
<body>

<div id="feedback"></div>

<div id="viewer">
	<span class="zoomout">-</span>
	<span class="zoomin">+</span>
	<div id="zoomcontrols">
		<div class='ui-slider-handle'></div>	
	</div>
	
	<div id="zoomimages">
		<div id="thumbnail">
			<img src="http://cdmtest.library.unlv.edu/cgi-bin/getimage.exe?CISOROOT=%2FLV_Maps&CISOPTR=426&DMSCALE=1.1583011583011582&DMWIDTH=120&DMHEIGHT=111.08108108108108&DMROTATE=0" />
		</div>
		<img id="mainimage" />
	</div>
	
</div>


</body>
</html>